<template>
  <div class="my">
    <div class="my_bg">
      <img v-if="!token" src="http://liufusong.top:8080/img/profile/bg.png" alt="" />
      <img v-else src="http://liufusong.top:8080/img/avatar.png" alt="" />
    </div>
    <div class="user_bg" v-if="!token">
      <div class="my_icon"><img src="http://liufusong.top:8080/img/profile/avatar.png" alt="" /></div>
      <p class="my_name">游客</p>
      <van-button @click="goLogin" type="primary" round>去登录</van-button>
    </div>
    <div class="user_bg" v-else>
      <div class="my_icon"><img src="http://liufusong.top:8080/img/profile/avatar.png" alt="" /></div>
      <p class="my_name">{{ username }}</p>
      <van-button class="user_exit" @click="goLogin" type="primary" round>退出</van-button>
      <p class="personal_data">编辑个人资料 ></p>
    </div>
    <van-grid :border="false" :clickable="true" :column-num="3">
      <van-grid-item v-for="item in grid" :key="item.id" :icon="item.icon" :text="item.text" :to="item.to" />
    </van-grid>
    <div @click="goInformation" class="my_bg_bottom">
      <img src="http://liufusong.top:8080/img/profile/join.png" alt="" />
    </div>
  </div>
</template>

<script>
import { Dialog } from 'vant'
import { getToken, delToken } from '@/utils/storage'
import { userLogout } from '@/api/user'
import { getUserData } from '@/api/article'
export default {
  data () {
    return {
      grid: [
        {
          id: 1,
          icon: 'star-o',
          text: '我的收藏',
          to: '/collection'
        },
        {
          id: 2,
          icon: 'wap-home-o',
          text: '我的出租',
          to: 'rent'
        },
        {
          id: 3,
          icon: 'clock-o',
          text: '看房记录'
        },
        {
          id: 4,
          icon: 'credit-pay',
          text: '成为房主'
        },
        {
          id: 5,
          icon: 'contact',
          text: '个人资料'
        },
        {
          id: 6,
          icon: 'service-o',
          text: '联系我们'
        }
      ],
      username: ''
    }
  },
  computed: {
    token () {
      return getToken()
    }
  },
  methods: {
    goLogin () {
      if (this.token) {
        Dialog.confirm({
          title: '提示',
          message: '是否确定退出',
          confirmButtonText: '退出',
          confirmButtonColor: 'RGB(16,142,233)'
        })
          .then(() => {
            // on confirm
            userLogout()
            delToken()
            this.$toast.success('退出登录成功')
            this.$router.push('/login')
          })
          .catch(() => {
            // on cancel
          })
      } else {
        this.$router.push('/login')
      }
    },
    goInformation () {
      this.$router.push('/data')
    }
  },
  async created () {
    const { body } = await getUserData()
    this.username = body.nickname
  }
}
</script>

<style lang="less" scoped>
.my {
  position: relative;
  .my_bg {
    width: 100%;
    height: 190px;
    // overflow: hidden;
    img {
      width: 100%;
    }
  }
  .user_bg {
    position: absolute;
    background: #fff;
    width: 75%;
    height: 85%;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 10px 3px #ddd;
    margin: 50px auto 0;
    padding: 0 20px;
    text-align: center;
    font-size: 13px;
    .my_icon {
      position: relative;
      transform: translateY(-50%);
      border-radius: 50%;
      width: 70px;
      height: 70px;
      border: 5px solid #f5f5f5;
      display: inline-block;
      box-shadow: 0 2px 2px #bdbdbd;
      img {
        width: 100%;
      }
    }
    .my_name {
      margin-top: -25px;
      margin-bottom: 15px;
    }
    /deep/ .van-button {
      height: 35px;
      border-radius: 12%;
    }
    /deep/ .user_exit {
      height: 20px;
      width: 60px;
      border-radius: 100px;
    }
    .personal_data {
      color: #999;
      font-size: 12px;
      margin-top: 20px;
    }
  }
  /deep/ .van-grid {
    position: absolute;
    left: 50%;
    top: 160%;
    transform: translateX(-50%);
    width: 100%;
    margin: 0px auto;
  }
  .my_bg_bottom {
    text-align: center;
    margin-top: 10px;
    img {
      width: 92%;
      position: absolute;
      left: 50%;
      top: 260%;
      transform: translateX(-50%);
    }
  }
}
</style>
